<script setup lang='ts'>
import { Menu as IconMenu } from '@element-plus/icons-vue'
import { data } from "../../api/apiType";
import { onMounted, ref } from 'vue';
const thisSelect = ref('2')
onMounted(() => {
  if (localStorage.getItem('select') !== null && localStorage.getItem('select') !== '') {
    thisSelect.value = localStorage.getItem('select') as string
  }

})
const thisSelectData = (e: string) => {
  localStorage.setItem('select', e)
}

</script>

<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="thisSelect" text-color="#fff">
        <router-link v-for="(i, index) in data" :key="index" :to="{ name: i.toName }">
          <el-menu-item :index='i.index' @click="thisSelectData(i.index)">
            <el-icon><icon-menu /></el-icon>
            <span>{{ i.title }}</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-row {
  display: unset;
}

.el-col-12 {
  max-width: 100% !important;
}
</style>